{% extends 'myadmin/base.html' %}
{% block main_body %}
<style>
    .table-box {
        overflow-x: auto;
        margin: 15px 0;
        border-radius: 6px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .dataTable {
        min-width: 1200px;
        width: 100%;
        border-collapse: collapse;
        background-color: #fff;
    }
    .dataTable th, .dataTable td {
        padding: 8px 12px;  /* 调整内边距与第二个页面一致 */
        text-align: center;
        border-bottom: 1px solid #f1f1f1;
    }
    .dataTable th {
        background-color: #f8f9fa;
        font-weight: 600;
        color: #333;
        white-space: nowrap;
    }
    .dataTable tr:hover {
        background-color: #f9f9f9;
    }
    .sortable {
        cursor: pointer;
        position: relative;
    }
    /* 筛选区布局优化 */
    .filter-container {
        margin-bottom: 15px;
    }
    .filter-group {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        align-items: center;
        padding: 15px;
        background-color: #f8f9fa;
        border-radius: 6px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    .filter-actions {
        margin-right: auto; /* 推到左侧，与其他筛选项分离 */
    }
    .filter-fields {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        align-items: center;
    }
    .filter-item {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    /* 表单元素样式统一 */
    .form-control, .input-group-sm .form-control, .input-group-sm .btn {
        border-radius: 4px;
        border: 1px solid #ddd;
        padding: 6px 12px;
        font-size: 13px;
        height: 34px;
        transition: border-color 0.2s;
    }
    .form-control:focus {
        border-color: #66afe9;
        outline: none;
        box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    }
    .btn {
        border-radius: 4px;
        padding: 6px 12px;
        font-size: 13px;
        transition: all 0.2s;
    }
    .btn-primary {
        background-color: #337ab7;
        border-color: #2e6da4;
        color: #fff;
    }
    .btn-primary:hover {
        background-color: #286090;
        border-color: #204d74;
    }
    .btn-default {
        background-color: #fff;
        border-color: #ddd;
    }
    .btn-default:hover {
        background-color: #e6e6e6;
    }
    /* 操作按钮样式调整（与第二个页面保持一致） */
    .btn-xs {
        padding: 1px 5px;  /* 小尺寸按钮内边距 */
        font-size: 12px;
        line-height: 1.5;
        border-radius: 3px;
    }
    .btn-primary.btn-xs {
        background-color: #337ab7;
        border-color: #2e6da4;
    }
    .btn-danger.btn-xs {
        color: #fff;
        background-color: #d9534f;
        border-color: #d43f3a;
    }
    .btn-danger.btn-xs:hover {
        background-color: #c9302c;
        border-color: #ac2925;
    }
    .input-group {
        display: flex;
    }
    .input-group-btn {
        display: flex;
    }
    .box-footer {
        padding: 10px 15px;
        background-color: #f8f9fa;
        border-top: 1px solid #ddd;
        border-radius: 0 0 6px 6px;
        text-align: right; /* 让分页容器右对齐 */
    }
    .box {
        border-radius: 6px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        border: none;
    }
    .box-header {
        padding: 10px 15px;
        background-color: #f8f9fa;
        border-bottom: 1px solid #ddd;
        border-radius: 6px 6px 0 0;
    }
    .box-title {
        font-size: 16px;
        margin: 0;
    }
    .calorie-calculator {
        color: #28a745;
        font-weight: 500;
    }
    .checkbox {
        margin: 0;
    }
    .pagination {
        margin: 0;
        display: inline-block; /* 让分页横向排列 */
        vertical-align: middle;
    }
    .pagination li {
        display: inline-block;
    }
    .pagination li a {
        padding: 6px 12px;
        color: #337ab7;
        border: 1px solid #ddd;
        margin: 0 2px;
        text-decoration: none;
    }
    .pagination li.active a {
        background-color: #337ab7;
        border-color: #337ab7;
        color: #fff;
    }
    .pagination li a:hover {
        background-color: #eee;
    }
    .pagination li.disabled a {
        color: #999;
        cursor: not-allowed;
        background-color: #fff;
        border-color: #ddd;
    }
    .search-container .form-control {
        height: 34px; /* 固定高度，与按钮保持一致 */
        padding: 0 12px; /* 调整内边距避免内容溢出 */
    }
    .search-container .input-group-btn .btn {
        height: 34px; /* 与搜索框高度完全一致 */
        right: 10px;
    }
</style>
<script>
    // 全选功能
    document.addEventListener('DOMContentLoaded', function() {
        const selall = document.getElementById('selall');
        const checkboxes = document.querySelectorAll('input[name="ids"]');
        
        selall.addEventListener('change', function() {
            checkboxes.forEach(checkbox => {
                checkbox.checked = this.checked;
            });
        });
        // 初始化排序图标
        const sortParam = '{{ request.GET.sort|default:'' }}';
        const orderParam = '{{ request.GET.order|default:'' }}';
        if (sortParam) {
            document.querySelector(`a[href*="sort=${sortParam}"]`).closest('th').classList.add(orderParam || 'asc');
        }
        // 搜索表单提交处理
        const filterGroup = document.querySelector('.filter-group');
        // 创建表单元素包裹筛选区域
        const form = document.createElement('form');
        form.method = 'get';
        form.action = '{% url 'myadmin_userdietrecords_index' 1 %}';
        // 将筛选区域内容移到表单内
        while (filterGroup.firstChild) {
            form.appendChild(filterGroup.firstChild);
        }
        filterGroup.appendChild(form);
    });
    
    function doDel(url) {
        if (confirm("确定删除该记录吗？")) {
            window.location.href = url;
        }
    }
    // 页面加载完成后计算热量
    document.addEventListener('DOMContentLoaded', function() {
        const calculators = document.querySelectorAll('.calorie-calculator');
        calculators.forEach(el => {
            const quantity = parseFloat(el.getAttribute('data-quantity')) || 0;
            const caloriesPer100g = parseFloat(el.getAttribute('data-calories')) || 0;
            const total = (quantity * caloriesPer100g / 100).toFixed(1);
            el.textContent = total;
        });
    });
</script>
<section class="content-header">
    <h1>饮食记录管理 <small>记录列表</small></h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-home"></i> 首页</a></li>
        <li><a href="#">饮食记录管理</a></li>
        <li class="active">记录列表</li>
    </ol>
</section>
<section class="content">
    <div class="box box-primary">
        <div class="box-header with-border">
            <h3 class="box-title">饮食记录列表</h3>
        </div>
        <div class="box-body">
            <!-- 筛选区布局重构 -->
            <div class="filter-container">
                <div class="filter-group">
                    <!-- 操作按钮区域（左侧） -->
                    <div class="filter-actions">
                        <button type="button" class="btn btn-primary">
                            <a href="{% url 'myadmin_userdietrecords_add' %}" style="color: inherit;"><i class="fa fa-plus"></i> 添加记录</a>
                        </button>
                    </div>
                    
                    <!-- 筛选字段区域（右侧） -->
                    <div class="filter-fields">
                        <!-- 用户筛选 -->
                        <div class="filter-item">
                            <select name="user" class="form-control input-sm" onchange="this.form.submit()">
                                <option value="">所有用户</option>
                                {% for user in users %}
                                <option value="{{ user.user_id }}" {% if selected_uid == user.user_id|stringformat:"i" %}selected{% endif %}>
                                    {{ user.username }}
                                </option>
                                {% endfor %}
                            </select>
                        </div>
                        
                        <!-- 食物筛选 -->
                        <div class="filter-item">
                            <select name="food" class="form-control input-sm" onchange="this.form.submit()">
                                <option value="">所有食物</option>
                                {% for food in foods %}
                                <option value="{{ food.food_id }}" {% if selected_fid == food.food_id|stringformat:"i" %}selected{% endif %}>
                                    {{ food.food_name }}
                                </option>
                                {% endfor %}
                            </select>
                        </div>
                        
                        <!-- 餐次筛选 -->
                        <div class="filter-item">
                            <select name="meal_type" class="form-control input-sm" onchange="this.form.submit()">
                                <option value="">所有餐次</option>
                                {% for key, value in meal_types.items %}
                                <option value="{{ key }}" {% if selected_meal == key %}selected{% endif %}>
                                    {{ value }}
                                </option>
                                {% endfor %}
                            </select>
                        </div>
                        
                        <!-- 日期筛选 -->
                        <div class="filter-item">
                            <input type="date" name="start_date" class="form-control input-sm" value="{{ start_date }}">
                            <span>至</span>
                            <input type="date" name="end_date" class="form-control input-sm" value="{{ end_date }}">
                        </div>
                        
                        <!-- 搜索框 -->
                        <div class="filter-item input-group input-sm search-container" style="width: 220px;">
                            <input type="text" name="keyword" class="form-control" placeholder="搜索用户/食物名称" 
                                   value="{{ request.GET.keyword|default:'' }}">
                            <span class="input-group-btn">
                                <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
                            </span>
                        </div>
                        
                        <!-- 重置按钮 -->
                        <div class="filter-item">
                            <button type="button" class="btn btn-default input-sm" onclick="window.location.href='{% url 'myadmin_userdietrecords_index' 1 %}'">
                                <i class="fa fa-refresh"></i> 重置
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="table-box">
                <table class="table table-bordered table-striped dataTable">
                    <thead>
                        <tr>
                            <th style="width: 40px;"><input type="checkbox" id="selall" class="checkbox"></th>
                            <th class="sortable">
                                <a href="?sort=record_id&order={% if request.GET.sort == 'record_id' and request.GET.order == 'asc' %}desc{% else %}asc{% endif %}">
                                    记录ID{% if request.GET.sort == 'record_id' %}{% if request.GET.order == 'asc' %} ▲{% else %} ▼{% endif %}{% endif %}
                                </a>
                            </th>
                            <th class="sortable">
                                <a href="?sort=user__username&order={% if request.GET.sort == 'user__username' and request.GET.order == 'asc' %}desc{% else %}asc{% endif %}">
                                    用户名{% if request.GET.sort == 'user__username' %}{% if request.GET.order == 'asc' %} ▲{% else %} ▼{% endif %}{% endif %}
                                </a>
                            </th>
                            <th class="sortable">
                                <a href="?sort=food__food_name&order={% if request.GET.sort == 'food__food_name' and request.GET.order == 'asc' %}desc{% else %}asc{% endif %}">
                                    食物名称{% if request.GET.sort == 'food__food_name' %}{% if request.GET.order == 'asc' %} ▲{% else %} ▼{% endif %}{% endif %}
                                </a>
                            </th>
                            <th class="sortable">
                                <a href="?sort=quantity&order={% if request.GET.sort == 'quantity' and request.GET.order == 'asc' %}desc{% else %}asc{% endif %}">
                                    食用量(g){% if request.GET.sort == 'quantity' %}{% if request.GET.order == 'asc' %} ▲{% else %} ▼{% endif %}{% endif %}
                                </a>
                            </th>
                            <th>热量总计(大卡)</th>
                            <th class="sortable">
                                <a href="?sort=meal_type&order={% if request.GET.sort == 'meal_type' and request.GET.order == 'asc' %}desc{% else %}asc{% endif %}">
                                    餐次类型{% if request.GET.sort == 'meal_type' %}{% if request.GET.order == 'asc' %} ▲{% else %} ▼{% endif %}{% endif %}
                                </a>
                            </th>
                            <th class="sortable">
                                <a href="?sort=record_time&order={% if request.GET.sort == 'record_time' and request.GET.order == 'asc' %}desc{% else %}asc{% endif %}">
                                    记录时间{% if request.GET.sort == 'record_time' %}{% if request.GET.order == 'asc' %} ▲{% else %} ▼{% endif %}{% endif %}
                                </a>
                            </th>
                            <th style="width: 120px;">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for vo in recordlist %}
                        <tr>
                            <td><input type="checkbox" name="ids" value="{{ vo.record_id }}" class="checkbox"></td>
                            <td>{{ vo.record_id }}</td>
                            <td>{{ vo.user.username }}</td>
                            <td>{{ vo.food.food_name }}</td>
                            <td>{{ vo.quantity }}</td>
                            <td>
                                <span class="calorie-calculator" 
                                    data-quantity="{{ vo.quantity|floatformat:1|default:0 }}" 
                                    data-calories="{{ vo.food.calories_per_100g|default:0 }}">
                                        0.0
                                </span>
                            </td>
                            <td>
                                {% for key, value in meal_types.items %}
                                    {% if key == vo.meal_type %}
                                        {{ value }}
                                    {% endif %}
                                {% endfor %}
                            </td>
                            <td>{{ vo.record_time|date:"Y-m-d H:i" }}</td>
                            <td>
                                <a href="{% url 'myadmin_userdietrecords_edit' vo.record_id %}" class="btn btn-xs btn-primary">编辑</a>
                                <a onclick="doDel('{% url 'myadmin_userdietrecords_delete' vo.record_id %}')" class="btn btn-xs btn-danger">删除</a>
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="9" style="text-align: center; padding: 30px;">暂无饮食记录数据</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            
            <!-- 分页区域布局优化 -->
            <div class="box-footer">
                <!-- 分页控件 -->
                <ul class="pagination">
                    <li {% if pIndex == 1 %}class="disabled"{% endif %}>
                        <a href="{% url 'myadmin_userdietrecords_index' pIndex|add:-1 %}?{{ request.GET.urlencode }}">&laquo;</a>
                    </li>
                    {% for p in plist %}
                    <li {% if p == pIndex %}class="active"{% endif %}>
                        <a href="{% url 'myadmin_userdietrecords_index' p %}?{{ request.GET.urlencode }}">{{ p }}</a>
                    </li>
                    {% endfor %}
                    <li {% if pIndex == recordlist.paginator.num_pages %}class="disabled"{% endif %}>
                        <a href="{% url 'myadmin_userdietrecords_index' pIndex|add:1 %}?{{ request.GET.urlencode }}">&raquo;</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>
{% endblock %}